<template>
    <app-dialog v-model="show" class="energy_dialog" width="800px" style="top: 3vh" title="能量详情" @open="handleOpen">
        <div class="energy_content" v-loading="loading">
            <div class="energy_tabs">
                <div v-for="(item, index) in tabslist" :class="activetime == item.value ? 'activetabs' : ''"
                    @click="changetab(item.value)" :key="index">{{ item.label }}</div>
            </div>
            <div class="energy_text">
                <div class="text_card">
                    <div class="text_all">
                        <div class="label">能量总收益:</div>
                        <div class="value">{{ billdata.all.add ? billdata.all.add.toFixed(2) : 0 }}</div>
                    </div>
                    <div class="text_classify">
                        <div class="item">
                            <div class="label">可转账收益:</div>
                            <div class="value">{{ billdata.all.KZZ_add ? billdata.all.KZZ_add.toFixed(2) : 0 }}</div>
                        </div>
                        <div class="item">
                            <div class="label">不可转账收益:</div>
                            <div class="value">{{ billdata.all.BKZZ_add ? billdata.all.BKZZ_add.toFixed(2) : 0 }}</div>
                        </div>
                    </div>
                </div>
                <div class="text_card">
                    <div class="text_all">
                        <div class="label">能量总消耗:</div>
                        <div class="value">{{ billdata.all.reduce ? billdata.all.reduce.toFixed(2) : 0 }}</div>
                    </div>
                    <div class="text_classify">
                        <div class="item">
                            <div class="label">可转账消耗:</div>
                            <div class="value">{{ billdata.all.KZZ_reduce ? billdata.all.KZZ_reduce.toFixed(2) : 0 }}
                            </div>
                        </div>
                        <div class="item">
                            <div class="label">不可转账消耗:</div>
                            <div class="value">{{ billdata.all.BKZZ_reduce ? billdata.all.BKZZ_reduce.toFixed(2) : 0 }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="energy_table">
                <el-table :data="billdata.day" style="width: 100%" height="390px">
                    <el-table-column prop="time" label="时间" />
                    <el-table-column prop="name" label="可转账收益">
                        <template #default="scope">
                            <div>{{ scope.row.KZZ_add.toFixed(2) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="不可转账收益">
                        <template #default="scope">
                            <div>{{ scope.row.BKZZ_add.toFixed(2) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="可转账消耗">
                        <template #default="scope">
                            <div>{{ scope.row.KZZ_reduce.toFixed(2) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="不可转账消耗">
                        <template #default="scope">
                            <div>{{ scope.row.BKZZ_reduce.toFixed(2) }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- <template #footer>
            <el-button type="primary" @click="handleClose">关闭</el-button>
        </template> -->
    </app-dialog>
</template>

<script setup>
import { http } from '@/utils/http'

const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])
const props = defineProps({
    data: Object
})

const times = ref({
    begin_time: '',
    end_time: ''
})
const activetime = ref(0)
const loading = ref(false)

const billdata = ref({
    all: {},
    day: []
})

const tabslist = ref([
    {
        value: 0,
        label: '上周'
    }, {
        value: 1,
        label: '本周'
    }, {
        value: 2,
        label: '上月'
    }, {
        value: 3,
        label: '本月'
    },
])

const getmemberbill = () => {
    loading.value = true
    let params = {
        params: {
            member_id: props.data.id,
            begin_time: times.value.begin_time,
            end_time: times.value.end_time
        }
    }

    http.get('/member/member_currency_bill', params).then((res) => {
        console.log(res);
        loading.value = false
        billdata.value.all = res.data.all
        billdata.value.day = []
        let days = res.data.day
        Object.keys(days).forEach(key => {
            let value = JSON.parse(JSON.stringify(days[key]))
            value.time = key
            billdata.value.day.push(value)
        });
    })

}

const getDateRange = (type) => {
    const today = new Date(); // 当前日期
    let startDate, endDate;

    if (type === 0) { // 上周
        // 获取当前周的周一和周日
        const currentDay = today.getDate();
        const currentDayOfWeek = today.getDay(); // 星期几

        // 计算上周的周一和周日
        const firstDayOfWeek = currentDay - currentDayOfWeek + 1; // 当前周的周一
        const lastDayOfWeek = firstDayOfWeek + 6; // 当前周的周日

        // 设置为上周的日期
        const firstDate = new Date(today);
        firstDate.setDate(firstDayOfWeek - 7); // 上周的周一

        const lastDate = new Date(today);
        lastDate.setDate(lastDayOfWeek - 7); // 上周的周日

        startDate = formatDate(firstDate);
        endDate = formatDate(lastDate);
    } else if (type === 1) { // 本周
        // 获取当前周的周一和周日
        const currentDay = today.getDate();
        const currentDayOfWeek = today.getDay(); // 星期几

        const firstDayOfWeek = currentDay - currentDayOfWeek + 1; // 当前周的周一
        const lastDayOfWeek = firstDayOfWeek + 6; // 当前周的周日

        const firstDate = new Date(today);
        firstDate.setDate(firstDayOfWeek); // 本周的周一

        const lastDate = new Date(today);
        lastDate.setDate(lastDayOfWeek); // 本周的周日

        startDate = formatDate(firstDate);
        endDate = formatDate(lastDate);
    } else if (type === 2) { // 上月
        // 获取上个月的开始和结束日期
        const firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1); // 上个月的第一天
        const lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0); // 上个月的最后一天

        startDate = formatDate(firstDayOfLastMonth);
        endDate = formatDate(lastDayOfLastMonth);
    } else if (type === 3) { // 本月
        // 获取本月的开始和结束日期
        const firstDayOfThisMonth = new Date(today.getFullYear(), today.getMonth(), 1); // 本月的第一天
        const lastDayOfThisMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0); // 本月的最后一天

        startDate = formatDate(firstDayOfThisMonth);
        endDate = formatDate(lastDayOfThisMonth);
    }

    return { startDate, endDate };
}
function formatDate(date) {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
}

const changetab = (value) => {
    activetime.value = value
    let a = getDateRange(activetime.value)
    times.value = {
        begin_time: a.startDate,
        end_time: a.endDate
    }
    getmemberbill()

}


const handleOpen = () => {
    activetime.value = 0
    let a = getDateRange(activetime.value)
    times.value = {
        begin_time: a.startDate,
        end_time: a.endDate
    }
    getmemberbill()
}
</script>

<style lang="scss" scoped>
.energy_content {
    display: flex;
    flex-direction: column;
}

.energy_tabs {
    width: 100%;
    display: flex;
    margin-bottom: 8px;

    div {
        margin-right: 12px;
        font-size: 14px;
        color: #8a8a8a;
        cursor: pointer;
    }
}

.energy_text {
    width: 100%;


    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;

    .text_card {
        width: calc(50% - 8px);
        background-color: #fafafa;
        padding: 12px 12px;
        display: flex;
        flex-direction: column;

        .text_all {
            padding-bottom: 12px;
            border-bottom: 1px solid #ebebeb;
            display: flex;
            align-items: center;

            .label {
                font-size: 14px;
                font-weight: 600;
                color: #333;
                margin-right: 8px;
            }

            .value {
                font-size: 16px;
                font-weight: bold;
                color: #333;

            }
        }

        .text_classify {
            padding-top: 12px;
            display: flex;
            flex-direction: column;

            .item {
                display: flex;
                align-items: center;

                .label {
                    font-size: 12px;
                    color: #333;
                    margin-right: 8px;
                }

                .value {
                    font-size: 14px;
                    font-weight: bold;
                    color: #02a66e;

                }
            }
        }
    }
}

.energy_table {
    width: 100%;
}

.activetabs {
    color: #ff7900 !important;
}
</style>

<style>
.energy_dialog .app-dialog__body {
    padding: 22px 40px 22px 40px !important;
}
</style>